<template>
  <div>
    <div class="bg-white grid-content">
      <div style="overflow: hidden">
        <div class="mytitle">
          <svg-icon icon-class="yjbb" class="myIcon" /> 积 压 井 情 况 表
        </div>
        <div class="myButtons">
          <el-button @click="handleClick('', 'add')">新增</el-button>
          <el-button @click="uploadData">批量导入</el-button>
        </div>
      </div>

      <el-tabs v-model="activeName" type="card" @tab-click="handleMenuClick">
        <el-tab-pane label="积压井情况表" name="first">积压井情况表</el-tab-pane>
        <el-tab-pane label="正处理" name="second">正处理</el-tab-pane>
        <el-tab-pane label="待处理" name="third">待处理</el-tab-pane>
        <el-tab-pane label="措施配合" name="fourth">措施配合</el-tab-pane>
        <el-tab-pane label="测静压" name="fifth">测静压</el-tab-pane>
        <el-tab-pane label="缝网压裂" name="sixth">缝网压裂</el-tab-pane>
      </el-tabs>

      <!--积压井情况表界面-->
      <el-table :data="jyjqkbData" border style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }" v-show="jyjqkbVisable">
        <el-table-column type="index" align="center" prop="dw" label="单位"></el-table-column>
        
        <el-table-column prop="id" align="center" label="检泵井">
          <el-table-column align="center" prop="jbj_js" label="井数（口）"></el-table-column>
          <el-table-column align="center" prop="jbj_ryx" label="日影响（t/d）"></el-table-column>
        </el-table-column>

        <el-table-column prop="id" align="center" label="积压井">
          <el-table-column align="center" prop="jyj_js" label="井数（口）"></el-table-column>
          <el-table-column align="center" prop="jyj_ryx" label="日影响（t/d）"></el-table-column>
        </el-table-column>

        <el-table-column prop="id" align="center" label="测压井">
          <el-table-column align="center" prop="cyj_js" label="井数（口）"></el-table-column>
          <el-table-column align="center" prop="cyj_ryx" label="日影响（t/d）"></el-table-column>
        </el-table-column>

        <el-table-column prop="id" align="center" label="措施井">
          <el-table-column align="center" label="缝网压裂">
            <el-table-column align="center" prop="csj_fwyl_js" label="井数（口）"></el-table-column>
            <el-table-column align="center" prop="csj_fwyl_ryx" label="日影响（t/d）"></el-table-column>
          </el-table-column>

          <el-table-column align="center" label="邻井封井/套管调查">
            <el-table-column align="center" prop="csj_ljfj_js" label="井数（口）"></el-table-column>
            <el-table-column align="center" prop="csj_ljfj_ryx" label="日影响（t/d）"></el-table-column>
          </el-table-column>

          <el-table-column align="center" label="测静压">
            <el-table-column align="center" prop="csj_csph_js" label="井数（口）"></el-table-column>
            <el-table-column align="center" prop="csj_csph_ryx" label="日影响（t/d）"></el-table-column>
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text">查看</el-button>
            <el-button @click="handleClick(scope.row, 'edit')" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--正处理界面-->
      <el-table :data="zclData" border style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }" v-show="zclVisable">
        <el-table-column align="center" label="正处理">
            <el-table-column align="center" type="index" prop="zcl_xh" label="序号"></el-table-column>
            
            <el-table-column align="center" prop="zcl_xd" label="小队"></el-table-column>
            
            <el-table-column align="center" prop="zcl_jh" label="井号"></el-table-column>
            
            <el-table-column align="center" prop="zcl_sgrq" label="施工日期"></el-table-column>

            <el-table-column align="center" prop="zcl_ryx" label="日影响(t/d)"></el-table-column>
            
            <el-table-column align="center" prop="zcl_jyyj" label="挤压原因"></el-table-column>
            
            <el-table-column align="center" prop="zcl_sgcs" label="施工措施"></el-table-column>
            
            <el-table-column align="center" prop="zcl_mqjd" label="目前进度"></el-table-column>
            
            <el-table-column align="center" prop="zcl_bz" label="备注"></el-table-column>
          </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text">查看</el-button>
            <el-button @click="handleClick(scope.row, 'edit')" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--待处理界面-->
      <el-table :data="dclData" border style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }" v-show="dclVisable">
        <el-table-column align="center" label="待处理">
            <el-table-column align="center" type="index" prop="dcl_xh" label="序号"></el-table-column>
            
            <el-table-column align="center" prop="dcl_xd" label="小队"></el-table-column>
            
            <el-table-column align="center" prop="dcl_jh" label="井号"></el-table-column>
            
            <el-table-column align="center" prop="dcl_sgrq" label="施工日期"></el-table-column>

            <el-table-column align="center" prop="dcl_ryx" label="日影响(t/d)"></el-table-column>
            
            <el-table-column align="center" prop="dcl_jyyj" label="挤压原因"></el-table-column>
            
            <el-table-column align="center" prop="dcl_sgcs" label="施工措施"></el-table-column>
            
            <el-table-column align="center" prop="dcl_mqjd" label="目前进度"></el-table-column>
            
            <el-table-column align="center" prop="dcl_bz" label="备注"></el-table-column>
          </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text">查看</el-button>
            <el-button @click="handleClick(scope.row, 'edit')" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--措施配合界面-->
      <el-table :data="csphData" border style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }" v-show="csphVisable">
        <el-table-column align="center" label="措施配合">
            <el-table-column align="center" type="index" prop="csph_xh" label="序号"></el-table-column>
            
            <el-table-column align="center" prop="csph_xd" label="小队"></el-table-column>
            
            <el-table-column align="center" prop="csph_jh" label="井号"></el-table-column>
            
            <el-table-column align="center" prop="csph_sgrq" label="施工日期"></el-table-column>

            <el-table-column align="center" prop="csph_ryx" label="日影响(t/d)"></el-table-column>
            
            <el-table-column align="center" prop="csph_jyyj" label="挤压原因"></el-table-column>
            
            <el-table-column align="center" prop="csph_sgcs" label="施工措施"></el-table-column>
            
            <el-table-column align="center" prop="csph_mqjd" label="目前进度"></el-table-column>
            
            <el-table-column align="center" prop="csph_bz" label="备注"></el-table-column>
          </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text">查看</el-button>
            <el-button @click="handleClick(scope.row, 'edit')" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--测静压界面-->
      <el-table :data="cjyData" border style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }" v-show="cjyVisable">
        <el-table-column align="center" label="测静压">
            <el-table-column align="center" type="index" prop="cjy_xh" label="序号"></el-table-column>
            
            <el-table-column align="center" prop="cjy_xd" label="小队"></el-table-column>
            
            <el-table-column align="center" prop="cjy_jh" label="井号"></el-table-column>
            
            <el-table-column align="center" prop="cjy_cyrq" label="测压日期"></el-table-column>

            <el-table-column align="center" prop="cjy_ryx" label="日影响(t/d)"></el-table-column>
          </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text">查看</el-button>
            <el-button @click="handleClick(scope.row, 'edit')" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--缝网压裂界面-->
      <el-table :data="fwylData" border style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }" v-show="fwylVisable">
        <el-table-column align="center" label="缝网压裂">
            <el-table-column align="center" type="index" prop="cjy_xh" label="序号"></el-table-column>
            
            <el-table-column align="center" prop="fwyl_xd" label="小队"></el-table-column>
            
            <el-table-column align="center" prop="fwyl_jh" label="井号"></el-table-column>
            
            <el-table-column align="center" prop="fwyl_sgrq" label="施工日期"></el-table-column>

            <el-table-column align="center" prop="fwyl_ryx" label="日影响(t/d)"></el-table-column>
          </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text">查看</el-button>
            <el-button @click="handleClick(scope.row, 'edit')" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination align="right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[1, 5, 10, 20, 30]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="jyjqkbData.length">
      </el-pagination>
    </div>

    <!-- 积压井情况表弹出框 -->
    <el-dialog :title="myDialogTitle" :visible.sync="jyjqkbFormVisible">
      <el-form :inline="true" :model="jyjqkbForm" class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input v-model="jyjqkbForm.id" placeholder="单位" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">检泵井</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井数（口）:">
              <el-input v-model="jyjqkbForm.jbj_js" placeholder="请输入井数"></el-input>
            </el-form-item>
            <el-form-item label="日影响（t/d）:">
              <el-input v-model="jyjqkbForm.jbj_ryx" placeholder="请输入日影响"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">积压井</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井数（口）:">
              <el-input v-model="jyjqkbForm.jyj_js" placeholder="请输入井数"></el-input>
            </el-form-item>
            <el-form-item label="日影响（t/d）:">
              <el-input v-model="jyjqkbForm.jyj_ryx" placeholder="请输入日影响"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">测压井</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井数（口）:">
              <el-input v-model="jyjqkbForm.cyj_js" placeholder="请输入井数"></el-input>
            </el-form-item>
            <el-form-item label="日影响（t/d）:">
              <el-input v-model="jyjqkbForm.cyj_ryx" placeholder="请输入日影响"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">措施井</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="缝网压裂井数（口）:">
              <el-input v-model="jyjqkbForm.csj_fwyl_js" placeholder="请输入井数"></el-input>
            </el-form-item>
            <el-form-item label="缝网压裂日影响（t/d）:">
              <el-input v-model="jyjqkbForm.csj_fwyl_ryx" placeholder="请输入日影响"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">邻井封井/套管调查</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邻井封井/套管调查井数（口）:">
              <el-input v-model="jyjqkbForm.csj_ljfj_js" placeholder="请输入井数"></el-input>
            </el-form-item>
            <el-form-item label="邻井封井/套管调查日影响（t/d）:">
              <el-input v-model="jyjqkbForm.csj_ljfj_ryx" placeholder="请输入日影响"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">测静压</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="测静压井数（口）:">
              <el-input v-model="jyjqkbForm.csj_csph_js" placeholder="请输入井数"></el-input>
            </el-form-item>
            <el-form-item label="测静压日影响（t/d）:">
              <el-input v-model="jyjqkbForm.csj_csph_ryx" placeholder="请输入日影响"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="jyjqkbFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="jyjqkbFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <!--正处理弹出框-->
    <el-dialog :title="myDialogTitle" :visible.sync="zclFormVisible">
      <el-form :inline="true" :model="zclForm" class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小队:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input v-model="zclForm.fid" placeholder="小队" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工日期:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input v-model="zclForm.fid" placeholder="施工日期" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井号:">
              <el-input v-model="zclForm.zcl_jh" placeholder="请输入井号:"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日影响：">
              <el-input v-model="zclForm.zcl_ryx" placeholder="请输入日影响"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="施工措施：">
              <el-input v-model="zclForm.zcl_sgcs" placeholder="请选择施工措施"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目前进度：">
              <el-input v-model="zclForm.zcl_mqjd" placeholder="请选择目前进度"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="挤压原因：">
              <el-input v-model="zclForm.zcl_jyyj" placeholder="请输入挤压原因"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注：">
              <el-input v-model="zclForm.zcl_bz" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="zclFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="zclFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <!--待处理弹出框-->
    <el-dialog :title="myDialogTitle" :visible.sync="dclFormVisible">
      <el-form :inline="true" :model="dclForm" class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小队:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input v-model="dclForm.fid" placeholder="小队" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工日期:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input v-model="dclForm.fid" placeholder="施工日期" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井号:">
              <el-input v-model="dclForm.zcl_jh" placeholder="请输入井号:"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日影响：">
              <el-input v-model="dclForm.zcl_ryx" placeholder="请输入日影响"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="施工措施：">
              <el-input v-model="dclForm.zcl_sgcs" placeholder="请选择施工措施"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目前进度：">
              <el-input v-model="dclForm.zcl_mqjd" placeholder="请选择目前进度"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="挤压原因：">
              <el-input v-model="dclForm.zcl_jyyj" placeholder="请输入挤压原因"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注：">
              <el-input v-model="dclForm.zcl_bz" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="dclFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dclFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <!--措施配合弹出框-->
    <el-dialog :title="myDialogTitle" :visible.sync="csphFormVisible">
      <el-form :inline="true" :model="csphForm" class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小队:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input v-model="csphForm.fid" placeholder="小队" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工日期:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input v-model="csphForm.fid" placeholder="施工日期" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井号:">
              <el-input v-model="csphForm.zcl_jh" placeholder="请输入井号:"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日影响：">
              <el-input v-model="csphForm.zcl_ryx" placeholder="请输入日影响"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="施工措施：">
              <el-input v-model="csphForm.zcl_sgcs" placeholder="请选择施工措施"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目前进度：">
              <el-input v-model="csphForm.zcl_mqjd" placeholder="请选择目前进度"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="挤压原因：">
              <el-input v-model="csphForm.zcl_jyyj" placeholder="请输入挤压原因"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注：">
              <el-input v-model="csphForm.zcl_bz" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="csphFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="csphFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <!--测静压弹出框-->
    <el-dialog :title="myDialogTitle" :visible.sync="cjyFormVisible">
      <el-form :inline="true" :model="cjyForm" class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小队:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input v-model="cjyForm.fid" placeholder="小队" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="测压日期:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input v-model="cjyForm.fid" placeholder="测压日期" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井号:">
              <el-input v-model="cjyForm.cjy_jh" placeholder="请输入井号:"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日影响：">
              <el-input v-model="cjyForm.cjy_ryx" placeholder="请输入日影响"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="cjyFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="cjyFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <!--缝网压裂弹出框-->
    <el-dialog :title="myDialogTitle" :visible.sync="fwylFormVisible">
      <el-form :inline="true" :model="fwylForm" class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小队:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input v-model="fwylForm.fid" placeholder="小队" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工日期:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input v-model="fwylForm.fid" placeholder="施工日期" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井号:">
              <el-input v-model="fwylForm.fwyl_jh" placeholder="请输入井号:"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日影响：">
              <el-input v-model="fwylForm.fwyl_ryx" placeholder="请输入日影响"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="fwylFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="fwylFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      currentPageName: "总览",

      activeName: "first",

      //容器区数据
      jyjqkbData: [
        {
          dw: "1",
          jbj_js: "1",
          jbj_ryx: "1",
          jyj_js: "1",
          jyj_ryx: "1",
          cyj_js: "1",
          cyj_ryx: "1",
          csj_fwyl_js: "1",
          csj_fwyl_ryx: "1",
          csj_ljfj_js: "1",
          csj_ljfj_ryx: "1",
          csj_csph_js: "1",
          csj_csph_ryx: "1"
        },
      ],

      //正处理数据
      zclData: [
        {
          zcl_xd: "1",
          zcl_jh: "1",
          zcl_sgrq: "1",
          zcl_ryx: "1",
          zcl_jyyj: "1",
          zcl_sgcs: "1",
          zcl_mqjd: "1",
          zcl_bz: "1"
        },
      ],

      //待处理数据
      dclData: [
        {
          dcl_xd: "1",
          dcl_jh: "1",
          dcl_sgrq: "1",
          dcl_ryx: "1",
          dcl_jyyj: "1",
          dcl_sgcs: "1",
          dcl_mqjd: "1",
          dcl_bz: "1"
        },
      ],

      //措施配合数据
      csphData: [
        {
          csph_xd: "1",
          csph_jh: "1",
          csph_sgrq: "1",
          csph_ryx: "1",
          csph_jyyj: "1",
          csph_sgcs: "1",
          csph_mqjd: "1",
          csph_bz: "1"
        },
      ],

      //测静压数据
      cjyData: [
        {
          cjy_xd: "1",
          cjy_jh: "1",
          cjy_cyrq: "1",
          cjy_ryx: "1"
        }
      ],

      //缝网压裂数据
      fwylData: [
        {
          fwyl_xd: "1",
          fwyl_jh: "1",
          fwyl_sgrq: "1",
          fwyl_ryx: "1"
        }
      ],

      //table数据总条数
      tableTotal: 30,
      //当前页码
      currentPage: 1,
      // 分页数
      pageSize: 5,

      //容器区数据
      jyjqkbForm: [
        {
          dw: "",
          jbj_js: "",
          jbj_ryx: "",
          jyj_js: "",
          jyj_ryx: "",
          cyj_js: "",
          cyj_ryx: "",
          csj_fwyl_js: "",
          csj_fwyl_ryx: "",
          csj_ljfj_js: "",
          csj_ljfj_ryx: "",
          csj_csph_js: "",
          csj_csph_ryx: ""
        },
      ],

      //正处理数据
      zclForm: [
        {
          zcl_xd: "",
          zcl_jh: "",
          zcl_sgrq: "",
          zcl_ryx: "",
          zcl_jyyj: "",
          zcl_sgcs: "",
          zcl_mqjd: "",
          zcl_bz: ""
        },
      ],

      //待处理数据
      dclForm: [
        {
          dcl_xd: "",
          dcl_jh: "",
          dcl_sgrq: "",
          dcl_ryx: "",
          dcl_jyyj: "",
          dcl_sgcs: "",
          dcl_mqjd: "",
          dcl_bz: ""
        },
      ],

      //措施配合数据
      csphForm: [
        {
          csph_xd: "",
          csph_jh: "",
          csph_sgrq: "",
          csph_ryx: "",
          csph_jyyj: "",
          csph_sgcs: "",
          csph_mqjd: "",
          csph_bz: ""
        },
      ],

      //测静压数据
      cjyForm: [
        {
          cjy_xd: "",
          cjy_jh: "",
          cjy_cyrq: "",
          cjy_ryx: ""
        }
      ],

      //缝网压裂数据
      fwylForm: [
        {
          fwyl_xd: "",
          fwyl_jh: "",
          fwyl_sgrq: "",
          fwyl_ryx: ""
        }
      ],

      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },

      //积压井情况表编辑框是否显示
      jyjqkbFormVisible: false,

      //正处理编辑框是否显示
      zclFormVisible: false,

      //待处理编辑框是否显示
      dclFormVisible: false,

      //措施配合编辑框是否显示
      csphFormVisible: false,

      //测静压
      cjyFormVisible: false,

      //缝网压裂
      fwylFormVisible: false,

      //弹出框是否是查看
      ischeck: false,

      //弹出框标题
      myDialogTitle: "",

      //积压井情况表总览的可见性
      jyjqkbVisable: true,

      //正施工容器区的可见性
      zclVisable: false,

      //待施工的可见性
      dclVisable: false,

      //措施配合可见性
      csphVisable: false,

      //测静压可见性
      cjyVisable: false,

      //缝网压裂可见性
      fwylVisable: false,
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleClick(row, handle) {
      if (this.currentPageName === "积压井情况表") {
        // 代表现在在总览页面打开隐藏的form表单，应该显示总览的Form
        this.jyjqkbFormVisible = true;
        this.jyjqkbForm = row;
        if (handle === "check") {
          this.myDialogTitle = "积压井情况表表信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.myDialogTitle = "积压井情况表表信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.myDialogTitle = "积压井情况表表信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        //同时其他的Form设置为false
        this.zclFormVisible = false;
        this.dclFormVisible = false;
        this.csphFormVisible = false;
        this.cjyFormVisible = false;
        this.fwylFormVisible = false;
      } else if (this.currentPageName === "正处理") {
        // 代表现在在总览页面打开隐藏的form表单，应该显示总览的Form
        this.zclFormVisible = true;
        this.zclForm = row;
        if (handle === "check") {
          this.myDialogTitle = "正处理信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.myDialogTitle = "正处理信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.myDialogTitle = "正处理信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.jyjqkbFormVisible = false;
        this.dclFormVisible = false;
        this.csphFormVisible = false;
        this.cjyFormVisible = false;
        this.fwylFormVisible = false;
      } else if (this.currentPageName === "待处理") {
        // 代表现在在总览页面打开隐藏的form表单，应该显示总览的Form
        this.dclFormVisible = true;
        this.dclForm = row;
        if (handle === "check") {
          this.myDialogTitle = "待处理信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.myDialogTitle = "待处理信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.myDialogTitle = "待处理信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.jyjqkbFormVisible = false;
        this.zclFormVisible = false;
        this.csphFormVisible = false;
        this.cjyFormVisible = false;
        this.fwylFormVisible = false;
      } else if (this.currentPageName === "措施配合") {
        // 代表现在在总览页面打开隐藏的form表单，应该显示总览的Form
        this.csphFormVisible = true;
        this.csphForm = row;
        if (handle === "check") {
          this.myDialogTitle = "措施配合信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.myDialogTitle = "措施配合信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.myDialogTitle = "措施配合信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.jyjqkbFormVisible = false;
        this.zclFormVisible = false;
        this.dclFormVisible = false;
        this.cjyFormVisible = false;
        this.fwylFormVisible = false;
      } else if (this.currentPageName === "测静压") {
        // 代表现在在总览页面打开隐藏的form表单，应该显示总览的Form
        this.cjyFormVisible = true;
        this.cjyForm = row;
        if (handle === "check") {
          this.myDialogTitle = "测静压信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.myDialogTitle = "测静压信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.myDialogTitle = "测静压信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.jyjqkbFormVisible = false;
        this.zclFormVisible = false;
        this.dclFormVisible = false;
        this.csphFormVisible = false;
        this.fwylFormVisible = false;
      } else if (this.currentPageName === "缝网压裂") {
        // 代表现在在总览页面打开隐藏的form表单，应该显示总览的Form
        this.fwylFormVisible = true;
        this.fwylForm = row;
        if (handle === "check") {
          this.myDialogTitle = "缝网压裂信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.myDialogTitle = "缝网压裂信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.myDialogTitle = "缝网压裂信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.jyjqkbFormVisible = false;
        this.zclFormVisible = false;
        this.dclFormVisible = false;
        this.csphFormVisible = false;
        this.cjyFormVisible = false;
      }
    },
    uploadData() {
      console.log("批量导入成功");
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    // 序号计算
    indexMethod(index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },

    //Tab标签区域切换按钮事件
    handleMenuClick(tab, event) {
      var content = event.target.innerText;
      if (content === "积压井情况表表") {
        this.currentPageName = "积压井情况表表";
        this.jyjqkbVisable = true;
        this.zclVisable = false;
        this.dclVisable = false;
        this.csphVisable = false;
        this.cjyVisable = false;
        this.fwylVisable = false;
      } else if (content === "正处理") {
        this.currentPageName = "正处理";
        this.jyjqkbVisable = false;
        this.zclVisable = true;
        this.dclVisable = false;
        this.csphVisable = false;
        this.cjyVisable = false;
        this.fwylVisable = false;
      } else if (content === "待处理") {
        this.currentPageName = "待处理";
        this.jyjqkbVisable = false;
        this.zclVisable = false;
        this.dclVisable = true;
        this.csphVisable = false;
        this.cjyVisable = false;
        this.fwylVisable = false;
        this.zongheshujuVisable = false;
      } else if (content === "措施配合") {
        this.currentPageName = "措施配合";
        this.jyjqkbVisable = false;
        this.zclVisable = false;
        this.dclVisable = false;
        this.csphVisable = true;
        this.cjyVisable = false;
        this.fwylVisable = false;
      }
      else if (content === "测静压") {
        this.currentPageName = "测静压";
        this.jyjqkbVisable = false;
        this.zclVisable = false;
        this.dclVisable = false;
        this.csphVisable = false;
        this.cjyVisable = true;
        this.fwylVisable = false;
      }
      else if (content === "缝网压裂") {
        this.currentPageName = "缝网压裂";
        this.jyjqkbVisable = false;
        this.zclVisable = false;
        this.dclVisable = false;
        this.csphVisable = false;
        this.cjyVisable = false;
        this.fwylVisable = true;
      }
      console.log(this.currentPageName);
    },
  },
};
</script>
  
<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: large;
  padding-left: 10px;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myButtons {
  float: right;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>
  